<template>
  <div>
    <div class="scene" id="mainScene" ref="threeScene"></div>
    <!-- 视频弹窗 -->
    <div class="videoContent" id="videoContent" v-if="videoContentShow">
      <el-button class="videoClose" @click="videoHide()">关闭</el-button>
      <h2 class="videoTitle">{{ videoTitle }}</h2>
      <!-- <div class="videoBox">
        <video id="video1" ref="videoDom" :src="videoUrl"></video>
      </div> -->
      <div class="videoBox">
        <video
          id="video2"
          ref="videoDom"
          :src="videoUrl"
          controls
          preload="auto"
        ></video>
      </div>
    </div>
    <!-- icon页面 -->
    <div id="camera" v-if="TagShow" ref="tagDom">
      <div id="message">
        <!-- <div class="mes_title">垛位详情</div>
                <div>垛位号:{{TagInfo.stackName}}</div>
                <div>库房号:{{TagInfo.roomId}}</div>
                <div>期货量:{{TagInfo.futureAmount}}</div>
                <div>现货量:{{TagInfo.spotAmount}}</div>
                <div>总容量:{{TagInfo.totalCapacity}}</div>
                <div>容量单位:{{TagInfo.capacityUnit}}</div> -->
        总建筑面积10,389平方米，拥有阅览座位1,000余个。内设借阅一体书库、电子阅览室、讨论间、自修室、多媒体教室、学术报告厅、小型会议室、展示厅、档案馆等功能区。图书馆馆藏资源涵盖全校各学科专业，截止目前，我馆拥有纸质图书5万余册，电子图书23万余册，期刊报刊100种。 
        我馆构建了以读者为中心的信息服务局域网络，采用汇文管理系统，资源建设、读者服务、业务工作实行全流程计算机网络管理。馆内实现有线网络、无线网络全覆盖，采用藏、借、阅、咨询一体化的全开放式服务管理模式，使用RFID技术实现对纸质图书的智能化管理和读者自助借还服务，并设有人脸识别系统、自助借还书机、书目检索机、多拉打印机、自助复印机、图书消毒机等现代化设施设备，充分利用信息化服务手段为全校师生服务。
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";

import emitter from "../mitt/index.js";
import { ThreeSceneEvent } from "../mitt/eventType";

import Videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flvjs-es6";
import "videojs-flash";

import Base3D from "../3DUtils/base3D";

const TagInfo = reactive({
  stackName: "321",
  roomId: "31",
  futureAmount: "321",
  spotAmount: "321",
  totalCapacity: "321",
  capacityUnit: "321",
});

const threeScene = ref(null);
const TagShow = ref(true);
const tagDom = ref(null);
const videoContentShow = ref(true);
const videoTitle = ref("");
const videoUrl = ref("");
const videoDom = ref(null);
const data = reactive({
  base3D: {},
});

function LoadingFinish() {
  console.log("模型加载完毕");
}

onMounted((async) => {
  data.base3D = new Base3D(threeScene.value, tagDom.value, LoadingFinish);

  console.log(videoDom.value);
  videoContentShow.value = false;
});

emitter.on(ThreeSceneEvent.changeWeather, function (status) {
  console.log(status);
  data.base3D.changeWeather(status);
});

emitter.on(ThreeSceneEvent.videoPlay, function (res) {
  videoTitle.value = res.title;
  videoUrl.value = res.videoUrl;
  videoContentShow.value = true;
  console.log(document.getElementById("video1"));
  setTimeout(function () {
    document.getElementById("videoContent").style.display = "block";
    document.getElementById("video1").play();
  }, 100);
});

emitter.on(ThreeSceneEvent.videoPlay2, function (res) {
  videoTitle.value = res.title;
  videoUrl.value = res.videoUrl;
  videoContentShow.value = true;
  console.log(document.getElementById("video2"));
  console.log(videoUrl.value);
  setTimeout(function () {
    document.getElementById("videoContent").style.display = "block";
    // document.getElementById("video1").play();

    this.videoPlayer = Videojs(document.getElementById("video2"), {
      autoplay: "muted", //自动播放
      controls: true, //用户可以与之交互的控件
      loop: true, //视频一结束就重新开始
      muted: false, //默认情况下将使所有音频静音
      //   aspectRatio: "16:9", //显示比率
      fullscreen: {
        options: { navigationUI: "hide" },
      },
      techOrder: ["html5", "flvjs"], // 兼容顺序
      flvjs: {
        mediaDataSource: {
          isLive: false,
          cors: true,
          withCredentials: false,
        },
      },
      sources: [{ src: res.videoUrl, type: "video/x-flv" }],
    });
  }, 100);
});
function videoHide() {
//   var video2 = document.getElementById("video2");
//   video2.pause();

  //   this.$refs.videoDom[0].pause();

  videoContentShow.value = false;
}


emitter.on(ThreeSceneEvent.msgInfoTag, function (res) {
  TagShow.value = res.status;
});

emitter.on(ThreeSceneEvent.cameraToTarget, function (status) {
  data.base3D.cameraToTarget(status);
});
</script>
<style lang="less" scoped>
#mainScene {
  width: 100%;
  height: 100%;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
}

.productScene_box {
  width: 100%;
  height: 200px;
  margin-top: -10px;
  margin-bottom: 10px;
}

#productScene {
  width: 100%;
  height: 100%;
}
.StackContent_wrap {
  width: 70%;
  max-width: 750px;
  max-height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  overflow: hidden;
}
.productList {
  max-height: 400px;
  padding-top: 10px;
  cursor: pointer;
}

.productActive {
  font-weight: bold;
  border-bottom: 1px solid #2e97f1;
}
.news_content {
  text-align: left;
  font-size: 12px;
}
.productList {
  font-size: 12px;
  text-align: left;
}

.videoContent {
  width: 60%;
  max-width: 800px;
  position: absolute;
  padding-bottom: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  color: white;
  display: none;
}

.videoContent .videoClose {
  position: absolute;
  top: 10px;
  right: 10px;
}

.videoContent .videoTitle {
  text-align: center;
  font-weight: bold;
  padding: 10px 0px;
}

.videoContent .videoBox {
  width: 94%;
  height: auto;
  margin-left: 3%;
  margin-top: 2%;
}
.videoContent .videoBox video {
  width: 100%;
  height: auto;
}

#camera {
  position: absolute;
  display: flex;
  /* display: none; */
  /* row是flex-direction默认值,可以不设置，表示主轴为水平方向，从左向右排列*/
  flex-direction: row;
  /*space-between表示*/
  justify-content: space-between;
  z-index: 100;
  top: 0;
  left: 0;
  visibility: show;
  #message {
    width: 440px;
    height: 220px;
    color: #fff;
    background: rgba(0, 0, 0, 0.658);
    padding: 0px;
    /* 边框 */
    background: linear-gradient(#00ffff, #00ffff) left top,
      linear-gradient(#00ffff, #00ffff) left top,
      linear-gradient(#00ffff, #00ffff) right bottom,
      linear-gradient(#00ffff, #00ffff) right bottom;
    background-repeat: no-repeat;
    background-size: 1px 20px, 36px 1px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 14px;
    padding: 8px 12px;
    text-align: left;

    .mes_title {
      padding: 5px 2px;
      font-size: 16px;
      text-align: left;
    }

    div {
      text-align: left;
      padding: 3px 20px;
      font-size: 14px;
    }
  }
}
</style>